import React, {Component} from 'react'
import {Relax} from "plume2";
import ares from 'ares-mobile';
import { hashHistory } from 'react-router';
import {List, WhiteSpace, SegmentedControl, Badge, Toast, AppIcon} from 'ares-uikit'
import {getServerUrl} from '../../../../util/index';
@Relax
export default class Change extends Component<any, any> {
    static relaxProps = {
        list: "bjList",
        editor: "editor",
        changeImageIndex: () => {
        },
        changeBannerImage: () => {
        }
    };

    constructor(props) {
        super(props);
        ares.extra.add('role');
        ares.config({
            jsApiList: [
                'biz.util.uploadImage',
                'biz.navigation.setTitle',
                'device.notification.alert',
                'extra.role'
            ]
        });
        ares.ready(() => {
            ares.biz.navigation.setTitle({
                title: "更换背景图片"
            });
            ares.extra.role({
                onSuccess: (value) => {
                    this.setState({
                        role: value
                    })
                },
            });
        })
    }
    setBack = () => {
        let id=this.props.relaxProps.editor.get("id");
        ares.biz.navigation.onBack({
            onSuccess: function (data) {
                hashHistory.replace({
                    pathname: `/qm-app-xsite/compile/${id}`,
                    state: { selectStatus: 1 }
                });
            }
        })
    };
    componentDidMount() {
        console.log("x-app-site");
        this.setBack();
    }

    uploadImage = () => {
        let tplId = this.props.relaxProps.editor.get("id");
        let _ratio = "750:380";
        if (tplId === "weixin-newFruit") {
            _ratio = "750:235"
        } else if (tplId === "weixin-newLifeSupplies") {
            _ratio = "750:535"
        } else {
            _ratio = "750:380"
        }
        ares.biz.util.uploadImage({
            multiple: false,
            max: 1,
            clip: true,
            ratio: _ratio,
            onSuccess: (data) => {
                let imgUrl = data[0];
                if (imgUrl.indexOf('http') !== 0) {
                    imgUrl= getServerUrl() + imgUrl;
                }
                this.props.router.go(-1);
                this.props.relaxProps.changeBannerImage(imgUrl);
            },
            onFail: function(err) {

            }
        })
    }

    render() {
        let {list} = this.props.relaxProps;
        let _li = [];
        list.map((_item, index) => {
            _li.push(<li key={index} className="templateImg" onClick={(e) => this.headerClick(index)}>
                <img src={_item.bannerImage} alt=""/>
            </li>)
        });
        return (
            <div style={{width: '100%', height: '100%'}} className="changeBackground">
                <div className="changeTitle">
                    <p className="uploadImage" onClick={this.uploadImage}>从手机相册中选择或拍照上传<AppIcon type="right" style={{
                        float: "right",
                        marginTop: "0.2rem"
                    }} size="sm"/></p>

                </div>
                <div className="selectImage">
                    <p className="selectTitle">选择精选图片</p>
                    <ul>{_li}</ul>
                </div>

                <p style={{marginTop: "100px", textAlign: "center"}}>更多设置请登录电脑后台 1000.com</p>
            </div>
        );
    }

    headerClick = (index) => {
        this.props.router.push('/qm-app-xsite/preview')
        // this.props.router.go(-1);
        this.props.relaxProps.changeImageIndex(index);
    }
}